<template>
  <div class="ref-magic-container">
    <h1>REF 魔法师训练营</h1>
    
    <!-- 场景一：勇者血量管理 -->
    <div class="magic-section">
      <h2>🗡️ 勇者冒险</h2>
      <div class="health-bar">
        <div class="health-bar-fill" :style="{ width: hp + '%' }"></div>
      </div>
      <p class="health-text">勇者血量：{{ hp }}</p>
      <button 
        @click="attack" 
        :disabled="attacking"
        class="magic-button"
      >
        {{ attacking ? '攻击中...' : '发起攻击' }}
      </button>
    </div>

    <!-- 场景二：魔法计数器 -->
    <div class="magic-section">
      <h2>✨ 魔法计数</h2>
      <p>魔法值：{{ magicCount }}</p>
      <div class="button-group">
        <button @click="increaseMagic" class="magic-button">增加魔法</button>
        <button @click="decreaseMagic" class="magic-button secondary">减少魔法</button>
        <button @click="resetMagic" class="magic-button danger">重置魔法</button>
      </div>
    </div>

    <!-- 场景三：魔法师状态 -->
    <div class="magic-section">
      <h2>🧙‍♂️ 魔法师状态</h2>
      <div class="status-container">
        <div class="status-item">
          <span class="status-label">魔法师名称：</span>
          <input 
            v-model="wizardName" 
            type="text" 
            placeholder="输入魔法师名称"
            class="magic-input"
          />
        </div>
        <div class="status-item">
          <span class="status-label">是否隐身：</span>
          <label class="magic-switch">
            <input 
              v-model="isInvisible" 
              type="checkbox"
              class="magic-checkbox"
            />
            <span class="magic-slider"></span>
          </label>
        </div>
        <div class="status-item" :class="{ 'invisible': isInvisible }">
          <p class="invisibility-text">
            {{ isInvisible ? '魔法师已隐身！' : '魔法师处于可见状态' }}
          </p>
        </div>
      </div>
    </div>

    <!-- 场景四：魔法消息 -->
    <div class="magic-section">
      <h2>📜 魔法消息</h2>
      <p>{{ magicMessage }}</p>
      <button @click="changeMessage" class="magic-button">
        变换消息
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 由于我们已经在sd目录下设置了package.json和Vue环境，这里的导入是正确的
import { ref } from 'vue'

// 场景一：勇者血量管理
const hp = ref(100)          // 英雄血量
const attacking = ref(false) // 是否正在攻击

const attack = () => {
  if (!attacking.value && hp.value > 0) {
    attacking.value = true
    setTimeout(() => {
      hp.value = Math.max(0, hp.value - 20) // 确保血量不小于0
      attacking.value = false
    }, 500)
  }
}

// 场景二：魔法计数器
const magicCount = ref(5) // 初始魔法值

const increaseMagic = () => {
  magicCount.value++
}

const decreaseMagic = () => {
  if (magicCount.value > 0) {
    magicCount.value--
  }
}

const resetMagic = () => {
  magicCount.value = 0
}

// 场景三：魔法师状态
const wizardName = ref('阿尔伯特')
const isInvisible = ref(false)

// 场景四：魔法消息
const messages = [
  '欢迎来到魔法学院！',
  'ref是响应式的基础魔法',
  '记住在脚本中使用.value',
  '在模板中直接使用变量名',
  'Vue会自动帮你更新DOM'
]

const currentMessageIndex = ref(0)
const magicMessage = ref(messages[currentMessageIndex.value])

const changeMessage = () => {
  currentMessageIndex.value = (currentMessageIndex.value + 1) % messages.length
  magicMessage.value = messages[currentMessageIndex.value]
}
</script>

<style scoped>
.ref-magic-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

h1 {
  text-align: center;
  color: #6b21a8;
  margin-bottom: 30px;
  font-size: 2.5rem;
}

.magic-section {
  background-color: #f3e8ff;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.magic-section:hover {
  transform: translateY(-5px);
}

h2 {
  color: #7e22ce;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

/* 血量条样式 */
.health-bar {
  width: 100%;
  height: 30px;
  background-color: #e5e7eb;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

.health-bar-fill {
  height: 100%;
  background-color: #10b981;
  transition: width 0.3s ease;
  border-radius: 15px;
}

.health-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: #374151;
  margin-bottom: 15px;
}

/* 按钮样式 */
.magic-button {
  background-color: #8b5cf6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: 10px;
  margin-bottom: 10px;
}

.magic-button:hover:not(:disabled) {
  background-color: #7c3aed;
}

.magic-button:disabled {
  background-color: #a78bfa;
  cursor: not-allowed;
}

.magic-button.secondary {
  background-color: #6b7280;
}

.magic-button.secondary:hover {
  background-color: #4b5563;
}

.magic-button.danger {
  background-color: #ef4444;
}

.magic-button.danger:hover {
  background-color: #dc2626;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
}

/* 状态容器样式 */
.status-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.status-label {
  font-weight: bold;
  color: #374151;
  min-width: 120px;
}

.magic-input {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.magic-input:focus {
  outline: none;
  border-color: #8b5cf6;
}

/* 开关样式 */
.magic-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.magic-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.magic-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.magic-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .magic-slider {
  background-color: #8b5cf6;
}

input:checked + .magic-slider:before {
  transform: translateX(26px);
}

.invisibility-text {
  font-style: italic;
  color: #6b7280;
}

.invisible .invisibility-text {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .ref-magic-container {
    padding: 10px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .status-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .status-label {
    margin-bottom: 5px;
  }
}
</style>